<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="/static/css/index.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/static/js/index.js">

    </script>
</head>
<body>
<div class="back"><input type="button" value="退出"  id="back"></div>

<div class="talk" >
    <div style="display: none" id="name_n">{$user_data.name}</div>
    <div style="display: none" id="uid">{$user_data.uid}</div>
    <div style="display: none" id="fd">{$user_data.fd}</div>
    <div class="title" id="title">
        聊天室——————————————JavaScrpit房间

    </div>


    <div class="talk_con" id="talk_con">
        <div class="talk_show" id="words" style="overflow: scroll;">
           <!-- <div class="atalk" ><span class="asay" id="talk1" id="asay">12-01 09:53:53 王者说：以后请多关照</span></div>-->

        </div>
        <div id="image_list" style="display:none">
            <img src="/static/image/qq/1.gif" alt="" class="image_con">
            <img src="/static/image/qq/2.gif" alt="" class="image_con">
            <img src="/static/image/qq/3.gif" alt="" class="image_con">
            <img src="/static/image/qq/4.gif" alt="" class="image_con">
            <img src="/static/image/qq/5.gif" alt="" class="image_con">
            <img src="/static/image/qq/6.gif" alt="" class="image_con">
            <img src="/static/image/qq/7.gif" alt="" class="image_con">
            <img src="/static/image/qq/8.gif" alt="" class="image_con">
            <img src="/static/image/qq/9.gif" alt="" class="image_con">
            <img src="/static/image/qq/10.gif" alt="" class="image_con">
            <img src="/static/image/qq/11.gif" alt="" class="image_con">
            <img src="/static/image/qq/12.gif" alt="" class="image_con">
            <img src="/static/image/qq/13.gif" alt="" class="image_con">
            <img src="/static/image/qq/14.gif" alt="" class="image_con">
            <img src="/static/image/qq/15.gif" alt="" class="image_con">
            <img src="/static/image/qq/16.gif" alt="" class="image_con">
            <img src="/static/image/qq/17.gif" alt="" class="image_con">
            <img src="/static/image/qq/18.gif" alt="" class="image_con">
            <img src="/static/image/qq/19.gif" alt="" class="image_con">
            <img src="/static/image/qq/20.gif" alt="" class="image_con">
            <img src="/static/image/qq/21.gif" alt="" class="image_con">
            <img src="/static/image/qq/22.gif" alt="" class="image_con">
            <img src="/static/image/qq/23.gif" alt="" class="image_con">
            <img src="/static/image/qq/24.gif" alt="" class="image_con">
            <img src="/static/image/qq/25.gif" alt="" class="image_con">
            <img src="/static/image/qq/26.gif" alt="" class="image_con">
            <img src="/static/image/qq/27.gif" alt="" class="image_con">
            <img src="/static/image/qq/28.gif" alt="" class="image_con">
            <img src="/static/image/qq/29.gif" alt="" class="image_con">
            <img src="/static/image/qq/30.gif" alt="" class="image_con">
            <img src="/static/image/qq/31.gif" alt="" class="image_con">
            <img src="/static/image/qq/32.gif" alt="" class="image_con">
            <img src="/static/image/qq/33.gif" alt="" class="image_con">
            <img src="/static/image/qq/34.gif" alt="" class="image_con">
            <img src="/static/image/qq/35.gif" alt="" class="image_con">
            <img src="/static/image/qq/36.gif" alt="" class="image_con">
            <img src="/static/image/qq/37.gif" alt="" class="image_con">
            <img src="/static/image/qq/38.gif" alt="" class="image_con">
            <img src="/static/image/qq/39.gif" alt="" class="image_con">
            <img src="/static/image/qq/40.gif" alt="" class="image_con">
            <img src="/static/image/qq/41.gif" alt="" class="image_con">
            <img src="/static/image/qq/42.gif" alt="" class="image_con">
            <img src="/static/image/qq/43.gif" alt="" class="image_con">
            <img src="/static/image/qq/44.gif" alt="" class="image_con">
            <img src="/static/image/qq/45.gif" alt="" class="image_con">
            <img src="/static/image/qq/46.gif" alt="" class="image_con">
            <img src="/static/image/qq/47.gif" alt="" class="image_con">
            <img src="/static/image/qq/48.gif" alt="" class="image_con">
            <img src="/static/image/qq/49.gif" alt="" class="image_con">
            <img src="/static/image/qq/50.gif" alt="" class="image_con">
            <img src="/static/image/qq/51.gif" alt="" class="image_con">
            <img src="/static/image/qq/52.gif" alt="" class="image_con">
            <img src="/static/image/qq/53.gif" alt="" class="image_con">
            <img src="/static/image/qq/54.gif" alt="" class="image_con">
            <img src="/static/image/qq/55.gif" alt="" class="image_con">
            <img src="/static/image/qq/56.gif" alt="" class="image_con">
            <img src="/static/image/qq/57.gif" alt="" class="image_con">
            <img src="/static/image/qq/58.gif" alt="" class="image_con">
            <img src="/static/image/qq/59.gif" alt="" class="image_con">
            <img src="/static/image/qq/60.gif" alt="" class="image_con">
            <img src="/static/image/qq/61.gif" alt="" class="image_con">
            <img src="/static/image/qq/62.gif" alt="" class="image_con">
            <img src="/static/image/qq/63.gif" alt="" class="image_con">
            <img src="/static/image/qq/64.gif" alt="" class="image_con">
            <img src="/static/image/qq/65.gif" alt="" class="image_con">
            <img src="/static/image/qq/66.gif" alt="" class="image_con">
            <img src="/static/image/qq/67.gif" alt="" class="image_con">
            <img src="/static/image/qq/68.gif" alt="" class="image_con">
            <img src="/static/image/qq/69.gif" alt="" class="image_con">
            <img src="/static/image/qq/70.gif" alt="" class="image_con">
            <img src="/static/image/qq/71.gif" alt="" class="image_con">
            <img src="/static/image/qq/72.gif" alt="" class="image_con">
            <img src="/static/image/qq/73.gif" alt="" class="image_con">
            <img src="/static/image/qq/74.gif" alt="" class="image_con">
            <img src="/static/image/qq/75.gif" alt="" class="image_con">
            <img src="/static/image/qq/76.gif" alt="" class="image_con">
            <img src="/static/image/qq/77.gif" alt="" class="image_con">
            <img src="/static/image/qq/78.gif" alt="" class="image_con">
            <img src="/static/image/qq/79.gif" alt="" class="image_con">
            <img src="/static/image/qq/80.gif" alt="" class="image_con">
            <img src="/static/image/qq/81.gif" alt="" class="image_con">
            <img src="/static/image/qq/82.gif" alt="" class="image_con">
            <img src="/static/image/qq/83.gif" alt="" class="image_con">
            <img src="/static/image/qq/84.gif" alt="" class="image_con">
            <img src="/static/image/qq/85.gif" alt="" class="image_con">
            <img src="/static/image/qq/86.gif" alt="" class="image_con">
            <img src="/static/image/qq/87.gif" alt="" class="image_con">
            <img src="/static/image/qq/88.gif" alt="" class="image_con">
            <img src="/static/image/qq/89.gif" alt="" class="image_con">
            <img src="/static/image/qq/90.gif" alt="" class="image_con">
            <img src="/static/image/qq/91.gif" alt="" class="image_con">
            <img src="/static/image/qq/92.gif" alt="" class="image_con">
            <img src="/static/image/qq/93.gif" alt="" class="image_con">
            <img src="/static/image/qq/94.gif" alt="" class="image_con">
            <img src="/static/image/qq/95.gif" alt="" class="image_con">
            <img src="/static/image/qq/96.gif" alt="" class="image_con">
            <img src="/static/image/qq/97.gif" alt="" class="image_con">
            <img src="/static/image/qq/98.gif" alt="" class="image_con">
            <img src="/static/image/qq/99.gif" alt="" class="image_con">
            <img src="/static/image/qq/100.gif" alt="" class="image_con">
            <img src="/static/image/qq/101.gif" alt="" class="image_con">
            <img src="/static/image/qq/102.gif" alt="" class="image_con">
            <img src="/static/image/qq/103.gif" alt="" class="image_con">
            <img src="/static/image/qq/104.gif" alt="" class="image_con">
            <img src="/static/image/qq/105.gif" alt="" class="image_con">
            <img src="/static/image/qq/106.gif" alt="" class="image_con">
            <img src="/static/image/qq/107.gif" alt="" class="image_con">
            <img src="/static/image/qq/108.gif" alt="" class="image_con">
            <img src="/static/image/qq/109.gif" alt="" class="image_con">
            <img src="/static/image/qq/110.gif" alt="" class="image_con">
            <img src="/static/image/qq/111.gif" alt="" class="image_con">
            <img src="/static/image/qq/112.gif" alt="" class="image_con">
            <img src="/static/image/qq/113.gif" alt="" class="image_con">
            <img src="/static/image/qq/114.gif" alt="" class="image_con">
            <img src="/static/image/qq/115.gif" alt="" class="image_con">
            <img src="/static/image/qq/116.gif" alt="" class="image_con">
            <img src="/static/image/qq/117.gif" alt="" class="image_con">
            <img src="/static/image/qq/118.gif" alt="" class="image_con">
            <img src="/static/image/qq/119.gif" alt="" class="image_con">
            <img src="/static/image/qq/120.gif" alt="" class="image_con">
            <img src="/static/image/qq/121.gif" alt="" class="image_con">
            <img src="/static/image/qq/122.gif" alt="" class="image_con">
            <img src="/static/image/qq/123.gif" alt="" class="image_con">
            <img src="/static/image/qq/124.gif" alt="" class="image_con">
            <img src="/static/image/qq/125.gif" alt="" class="image_con">
            <img src="/static/image/qq/126.gif" alt="" class="image_con">
            <img src="/static/image/qq/127.gif" alt="" class="image_con">
            <img src="/static/image/qq/128.gif" alt="" class="image_con">
            <img src="/static/image/qq/129.gif" alt="" class="image_con">
            <img src="/static/image/qq/130.gif" alt="" class="image_con">
            <img src="/static/image/qq/131.gif" alt="" class="image_con">
            <img src="/static/image/qq/132.gif" alt="" class="image_con">

        </div>
        <div class="talk_input">
            <input type="text" class="talk_word" id="talkwords">
            <input type="button" value="发送信息" class="talk_sub" id="talksub">
            <div id="image_icon">

                <button class="talk_sub" id="talksub_img">发送表情</button>
            </div>


            <select class="talk_sub" id="talksub_color" style="width: 100px;">
                <option value="">选择文字颜色</option>

                <option value="white">白色</option>

                <option value="red">红色</option>

                <option value="yellow">黄色</option>

                <option value="blue">蓝色</option>

            </select>



            <select class="talk_sub" id="talksub_bgcolor" style="width: 100px;">
                <option value="">选择背景颜色</option>

                <option value="white">白色</option>

                <option value="red">红色</option>

                <option value="yellow">黄色</option>

                <option value="blue">蓝色</option>

            </select>

            <!-- <input type="button" value="文字颜色" class="talk_sub" id="talksub_color">
            <input type="button" value="背景颜色" class="talk_sub" id="talksub_bgcolor"> -->
        </div>
    </div>
    <div class="user_list">
        <div class="user_list_title">用户列表</div>
        <div class="user">
            <ul id='user_list'>
                
            
            </ul>
        </div>
    </div>



</div>

</body>
<script type="text/javascript" charset="utf-8">
var ws = new WebSocket("ws://113.44.136.17:9501");
    $(document).ready(function() {
   
    var name = $('#name_n').html();
    
    var uid = $('#uid').html();
    var fd = $('#fd').html();
    
    // 连接成功时执行的函数
    ws.onopen = function() {
        console.log("WebSocket连接成功！");
        // 可以在这里发送初始消息


        var obj = {
            type: "init",
            name: name,
            uid: uid
        };

        // 将对象转换为JSON字符串
        var jsonString = JSON.stringify(obj);
        ws.send(jsonString);
    };

    // 接收到消息时执行的函数
    ws.onmessage = function(event) {
        var jsonObject = $.parseJSON(event.data);
        console.log(jsonObject);
        var str = '';
        var li = '';
        if(jsonObject.type==2)//接受用户发过来的消息
        {
            str = '<div class="atalk"><span class="asay">'+jsonObject.createtime+' '+jsonObject.name+'说 :' + jsonObject.data +'</span></div>';
        /* 返回到html显示 */
        //Words.innerHTML = Words.innerHTML + str;
        //TalkWords.value=""
            
        }
        else if(jsonObject.type==4)//进入聊天是
        {
             str = '<div class="atalk"><span class="asay">'+jsonObject.createtime+' '+jsonObject.name+' 进入聊天室'  +'</span></div>';
             $.each(jsonObject.data, function(index, value) {  
                 li += '<li>'+value+'</li>';
            });
            $('#user_list').html(li);
        }
        else if(jsonObject.type==3)//退出聊天是
        {
             str = '<div class="atalk"><span class="asay">'+jsonObject.createtime+' '+jsonObject.name+' 推出聊天室'  +'</span></div>';
            $.each(jsonObject.data, function(index, value) {  
                 li += '<li>'+value+'</li>';
            });
            $('#user_list').html(li);
        }
        else if(jsonObject.type==5)//表情
        {
             str = '<div class="atalk"><span class="asay">'+jsonObject.createtime+' '+jsonObject.name+' 说：<img src="/static/image/qq/'+jsonObject.data+'.gif" alt="" class="image_con"></span></div>';
        }
        $("#words").append(str);
        
    };

    // 连接错误时执行的函数
    ws.onerror = function(error) {
        console.log("WebSocket连接出错：" + error);
    };

    // 连接关闭时执行的函数
    ws.onclose = function() {
        console.log("WebSocket连接已关闭");
    };
});
window.onload = function(){
    //var username = decodeURI(location.search.split("=")[1]);/* 获取username decodeURI解码，不解会乱码中文*/
    var username  = $('#name_n').text();

   
    var Words = document.getElementById("words");/* 显示对话 */
    var TalkWords = document.getElementById("talkwords");/* 输入框 */
    var TalkSub = document.getElementById("talksub");/* 发送信息按钮 */

    var talksub_img=document.getElementById("talksub_img")/* 发送表情按钮 */
    var image_list = document.getElementById("image_list")/* 获取图片列表 */
    var image_icon=document.getElementById("image_icon")/* 获取表情包图片 */

    var title=document.getElementById("title")/* 改变标题 */
    title.innerHTML=username+'聊天室——————————————JavaScrpit房间'

    var talk1=document.getElementById("talk1")/* 改变对话 */
    var talk2=document.getElementById("talk2")
    var talk3=document.getElementById("talk3")

   

    /* 表情包 */
    var image_con=document.getElementsByClassName("image_con")
    /*   console.log(image_con.length) */
    /* 为每个表情包图片绑定点击事件*/
    image_icon.onclick=function(){

        for(var i=0;i<image_con.length;i++){
            image_con[i].num=i/* 绑定图片下标，用下标索引图片 */
            image_con[i].onclick=function(){
                x=this.num/* x是下标 1 2 3 */
                /*  console.log(x) */
                /* 点击图片发送显示的 */
                str = '<div class="atalk"><span class="asay">'+username+' 说：<img src="/static/image/qq/'+(x+1)+'.gif" alt="" class="image_con"></span></div>';
                
                //Words.innerHTML = Words.innerHTML + str;
                var obj = {
                    type: "bq",
                    name: username,
                    data: (x+1)
                };
        
                // 将对象转换为JSON字符串
                var jsonString = JSON.stringify(obj);
                ws.send(jsonString);
            }

        }
        /* 这里设置表情包框显示余隐藏，一开始我设置隐藏，点击就切换为显示block */
        if(image_list.style.display=="block"){
            image_list.style.display="none"
            console.log(image_con.length)

        }else{
            image_list.style.display="block"
        }

    }

    var talksub_color=document.getElementById("talksub_color")/* 点击切换文字颜色 */
    var talksub_bgcolor=document.getElementById("talksub_bgcolor")/* 点击切换背景颜色 */




    talksub_color.onclick=function(){
        var asay=document.getElementsByClassName("asay")
        var txcol=document.getElementById("talksub_color").value
        console.log(asay);
        for(var j=0;j<asay.length;j++){
            asay[j].style.color=txcol
        }



    }
    /* 改变背景颜色 */
    talksub_bgcolor.onclick=function(){
        var bgcol=document.getElementById("talksub_bgcolor").value
        console.log(bgcol)
        Words.style.backgroundColor=bgcol
    }


    var back=document.getElementById("back")
    back.onclick=function(){
        window.location.href = ' ./登录.html'
    }



    TalkSub.onclick = function(){

        //定义空字符串
        var str = "";
        if(TalkWords.value == ""){
            // 消息为空时弹窗
            alert("消息不能为空");
            return;
        }

        /* 敏感词过滤 */
        var arr = [/靠/ig,/tmd/ig,/nm/ig,/tm/ig,/他妈的/ig];
        for(var i=0;i<arr.length;i++){
            /*这些if来判断敏感词的个数，i==0就是靠，就一个敏感词，所以就一个*，以此类推*/
            if(i==0){
                TalkWords.value = TalkWords.value.replace(arr[i],"*");
            }
            if(i==1){
                TalkWords.value = TalkWords.value.replace(arr[i],"***");
            }
            if(i==2){
                TalkWords.value = TalkWords.value.replace(arr[i],"**");
            }
            if(i==3){
                TalkWords.value = TalkWords.value.replace(arr[i],"**");
            }
            if(i==4){
                TalkWords.value = TalkWords.value.replace(arr[i],"***");
            }

        }
        /* 把输入话语拼接 */
        //str = '<div class="atalk"><span class="asay">'+username+'说 :' + TalkWords.value +'</span></div>';
        /* 返回到html显示 */
        //Words.innerHTML = Words.innerHTML + str;
        //TalkWords.value=""
        var obj = {
            type: "xx",
            name: username,
            data: TalkWords.value
        };

        // 将对象转换为JSON字符串
        var jsonString = JSON.stringify(obj);
        ws.send(jsonString);
    }

}

</script>
</html>